<script setup lang="ts">
import { ref } from 'vue'
import {useRouter} from 'vue-router'
import { showToast } from 'vant'
import {get,post} from '../../utils/request'
const username = ref('')
const password = ref('')
const router=useRouter()
// 登录逻辑
const onLogin = async () => {
  try{
    if (!username.value || !password.value) {
      showToast('用户名和密码不能为空')
      return
    }
    
    let res = await post('/wyq/login', {
      username: username.value,
      password: password.value
    })
    
    console.log('登录响应:', res)
    
    if(res && res.data && res.data.code === 200){
      localStorage.setItem('token', res.data.token)
      localStorage.setItem('userId', res.data.userId)
      localStorage.setItem('username', res.data.username)
      localStorage.setItem('accesstoken', res.data.accesstoken)
      router.push('/home')
    } else {
      showToast('用户名或者密码错误')
    }
  } catch(err:any){
    console.log('登录错误:', err)
    showToast('登录失败，请稍后再试')
  }
}
// const ceshi=async()=>{
//   let res=await get('/wyq/ceshi',{},{
//     withCredentials:true
//   })
// }
</script>

<template>
  <div class="login-wrapper">
    <div class="login-body">
      <h3 class="login-title">登录您的账号</h3>
      <van-field
        v-model="username"
        label="用户名"
        placeholder="请输入账号"
        type="text"
        input-align="left"
        clearable
        class="field"
      />

      <van-field
        v-model="password"
        label="密码"
        type="password"
        placeholder="请输入密码"
        input-align="left"
        clearable
        class="field"
      >
      </van-field>

      <van-button type="primary" block round class="login-button" @click="onLogin">
        登录
      </van-button>

      <div class="forget" @click="()=>{router.push(`/forget?username=${username}`)}">忘记密码？</div>

      <div class="divider">其他登录方式</div>

      <div class="icons">
        <van-icon name="wechat" size="26" />
        <van-icon name="qq" size="26" />
        <van-icon name="contact" size="26" />
      </div>
    </div>

    <div class="register">
      <span>还没有账户？</span>
      <span class="register-link" @click="()=>{router.push('/register')}">现在注册</span>
    </div>
  </div>
</template>

<style scoped>
.login-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  padding: 32px 24px;
  box-sizing: border-box;
}

.login-title {
  text-align: center;
  margin-bottom: 24px;
}

.field {
  margin-bottom: 16px;
}

.login-button {
  margin-top: 12px;
  background-color: black;
  border: none;
}

.forget {
  margin-top: 20px;
  font-size: 12px;
  text-align: right;
  color: #666;
  text-align: center;
}

.divider {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin: 28px 0 16px;
}

.icons {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.register {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.register-link {
  color: #000;
  margin-left: 4px;
  cursor: pointer;
}
</style>
